<template>
  <div>
    <var-row :gutter="[10, 10]">
      <var-col :span="24">
        <var-paper v-if="info" :elevation="2">
          <var-card outline>
            <template #title>
              <var-row justify="center">
                <var-image :src="cpu_img" style="margin: 18px"></var-image>
                <var-row justify="center">
                  <var-col :span="18"> CPU:{{ info.cpu }} </var-col>
                </var-row>
              </var-row>
            </template>
            <template #subtitle>
              <var-cell border title="核心数">
                <template #extra>
                  <span style="color: red">{{ info.physic }}</span>
                </template>
              </var-cell>
              <var-cell border title="逻辑核心数">
                <template #extra>
                  <span style="color: rgb(255, 132, 0)">{{ info.logic }}</span>
                </template>
              </var-cell>
            </template>
            <template #description>
              <div>
                <var-cell
                  ripple
                  border
                  v-for="key in getKeys(info.percent)"
                  :key="key"
                  :title="key"
                >
                  <template #extra>
                    {{ info.percent[key] }}
                  </template>
                </var-cell>
              </div>
            </template>
            <template #extra>
              <var-button
                loading-type="wave"
                type="primary"
                @click="fetchData"
                :loading="load_data"
                size="small"
                :disabled="load_data"
              >
                刷新
              </var-button>
            </template>
          </var-card>
        </var-paper>
        <div v-else class="load-wrapper">
          <var-loading type="disappear" />
        </div>
      </var-col>
    </var-row>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { debounce } from "../../../config/methods";
import network from "../../../config/network";
import aixos from "axios";
import cpu_img from "../../image/CPU.png";
const info = ref(null);
const load_data = ref(false);
function getSystem() {
  load_data.value = !load_data.value;
  aixos
    .get(network.HOST.SERVER_INFO)
    .then((res) => {
      if (res && res.data) {
        info.value = res.data;
      }
      load_data.value = !load_data.value;
    })
    .catch((err) => {
      load_data.value = false;
    });
}

function fetchData() {
  debounce(getSystem, 300);
}

getSystem();
function getKeys(vm_arr) {
  return Object.keys(vm_arr);
}
</script>

<style lang="scss">
.load-wrapper {
  height: 472px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: white;
}
</style>
